<template>
  <div class="search_post">
    <div v-if="Object.keys(postData).length !== 0">
      <search-nav-bar></search-nav-bar>
      <condition :conditions="conditions"></condition>
      <div class="resultCounter">
        为你搜索到<span>{{postData.result}}</span>条结果
      </div>
      <search-result>
        <interview slot="result" :interview-data="postData.data"></interview>
        <hot-list slot="hot" :hot-list="hotList"></hot-list>
      </search-result>
    </div>
  </div>
</template>

<script>
  import SearchNavBar from "../searchNavBar/SearchNavBar";
  import Condition from "../condition/Condition";
  import SearchResult from "../searchResult/SearchResult";
  import Interview from "../interview/Interview";
  import HotList from "../hotList/HotList";

  // 类和方法
  import {getArticleList,Article,getArticleListWithQuery} from "network/search";
  import {timeFormat} from "common/Utils";

  export default {
    name: "SearchPost",
    components: {
      SearchNavBar,
      Condition,
      SearchResult,
      Interview,
      HotList
    },
    data() {
      return {
        conditions: [
          {
            title: '城市',
            conditions: ["全国", "北京", "上海", "广州", "深圳", "杭州", "天津", "成都", "武汉", "重庆", "吉林", "西安", "长沙",],
            isShowInput: true
          },
          {
            title: '时间',
            conditions: ["全部", "最近一天", "最近一周", "最近一月", "最近一年", "两年内"],
            isShowInput: false
          },
          {
            title: '已选',
            conditions: {
              city: '',
              time: ''
            },
            isShowInput: false,
          }
        ],
        hotList: [
          {
            rank: 1,
            content: '字节跳动'
          },
          {
            rank: 2,
            content: '百度'
          },
          {
            rank: 3,
            content: '腾讯'
          },
          {
            rank: 4,
            content: '字节跳动'
          },
          {
            rank: 5,
            content: '百度'
          },
          {
            rank: 6,
            content: '腾讯'
          },
          {
            rank: 7,
            content: '字节跳动'
          },
          {
            rank: 8,
            content: '百度'
          },
          {
            rank: 9,
            content: '哈哈哈'
          },
        ],
        postData: {
          result: '',
          data: [],
        },
        conditionClick: null,
        search: null,
        city: '',
        time: '',
      }
    },
    watch: {
      city() {
        this.conditions[this.conditions.length - 1].conditions.city = this.city
      },
      time() {
        this.conditions[this.conditions.length - 1].conditions.time = this.time
      },
    },
    created() {
      getArticleList().then(res => {
        if(res.data.code) {
          const arr = []
          res.data.data.list.map(item => {
            arr.push(new Article(item))
          })
          this.postData.data = arr
          this.postData.result = arr.length
        }
      })
    },
    mounted() {
      this.conditionClick = (condition) => {
        if(condition.title == "城市") {
          this.city = condition.conditionSelect
          getArticleListWithQuery && getArticleListWithQuery(this.city, this.time).then(res => {
            const arr = []
            res.data.data.list.map(item => {
              arr.push(new Article(item))
            })
            this.postData.data = arr
            this.postData.result = arr.length
          })
        }
        else if(condition.title == "时间") {
          this.time = timeFormat(condition.conditionSelect)
          getArticleListWithQuery && getArticleListWithQuery(this.city, this.time).then(res => {
            const arr = []
            res.data.data.list.map(item => {
              arr.push(new Article(item))
            })
            this.postData.data = arr
            this.postData.result = arr.length
          })
        }
      }
      this.$bus.$on('conditionClick', this.conditionClick)
      this.search = (search) => {
        getArticleListWithQuery('', '', search).then(res => {
          if(res.data.code) {
            const arr = []
            res.data.data.list.map(item => {
              arr.push(new Article(item))
            })
            this.postData.data = arr
            this.postData.result = arr.length
          }
        })
      }
      this.$bus.$on('search', this.search)
    },
    beforeDestroy() {
      this.$bus.$off('conditionClick', this.conditionClick)
    },
  }
</script>

<style scoped>
  .search_post {
    width: 1100px;
    margin: 0 auto;
    overflow: hidden;
  }

  .resultCounter {
    height: 50px;
    margin: 10px 0;
    padding-left: 20px;
    background-color: #fff;
    border-radius: 10px;
    line-height: 50px;
    color: #8F9395;
    font-size: 14px;
  }

  .resultCounter span {
    margin: 0 2px;
    color: #4361a7;
  }
</style>
